<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"
      xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <link href="index.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/bootstrap/4.1.3/css/bootstrap.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/animate.css/3.5.2/animate.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/vue-router/3.1.2/vue-router.js"></script>
    <script src="index.js"></script>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--参数传递、子路由、路由跳转-->
<template id="news">
    <div>
        <h2>用户信息</h2>
        <ul>
            <li>
<!--                Restful风格参数传递-->
                <router-link :to="'/news/login/'+uname+'/'+pwd">登录</router-link>
<!--                第二种参数传递方式-->
                <router-link :to="'/news/register?uname=Fcant'">注册</router-link>
            </li>
        </ul>
        <router-view></router-view>
    </div>
</template>
<template id="login">
    <div>
        <h3>用户登录</h3>
        用户名：{{$route.params.uname}}<input>
        密码：<input>
    </div>
</template>
<template id="register">
    <div>
        <h3>用户注册</h3>
        用户名：{{$route.query.uname}}<input>
        密码：<input>
    </div>
</template>

<!--路由-->
<div id="root-router">
<!--    路由输出显示-->
    <router-link to="/home">Home</router-link>
    <router-link to="/news">News</router-link>
<!--    配置绑定才会被解析-->
    <router-link :to="'/one/'+id">One</router-link>
    <div><router-view></router-view></div>
    <button @click="goNews">goNews</button>
</div>
<template id="one">
    <div>
<!--        读取路由的参数,引用内部参数使用'$'-->
        <h2>One{{$route.params.id}}</h2>
    </div>
</template>

<!--动画样式-->
<div id="root-css">
    <button @click="flag=!flag">动画</button>
<!--    使用animate提供的样式时要animated表示使用的animated的样式-->
    <transition enter-active-class="animated jello" leave-active-class="animated zoomOutLeft">
        <div class="div1" v-show="flag">显示动画</div>
    </transition>
<!--    通过钩子函数自定义动画样式-->
    <transition name="fade" @before-enter="beforeEnter" @enter="enter"
    @after-enter="afterEnter" @before-leave="beforeLeave" @leave="leave"
    @after-leave="afterLeave">
        <div class="div1" v-show="flag">自定义动画</div>
    </transition>
</div>

<!--计算属性的值，通过修改引用属性的值达到修改计算属性的结果-->
<div id="root-var">
    <p>商品列表及价格：</p>
    <ul>
        <li v-for="(v, i) in shopcart">
            名称：{{v.name}}，价格：{{v.price}}，数量：{{v.count}}
        </li>
    </ul>
    <button @click="changeShop">changeShop</button>
    <button @click="setComputedValue">setComputedValue</button>
    <h5>商品总价：{{priceAllByReduce}}</h5>
    <p>修改数值：{{num}}</p>
</div>

<!--对象的监听-->
<div id="root-tgb">
    <input type="text" v-model="name">名字
    <p>名字：{{name}}</p>

    <input type="text" v-model="address.text">地址
    <p>名字：{{address.text}}</p>
</div>

<!--兄弟组件通信-->
<div id="com-brother">
    <com-b-1></com-b-1>
    <com-b-2></com-b-2>
    <com-b-3></com-b-3>
</div>
<template id="com-b-1">
    <div>
        <h3>组件A:{{name}}</h3>
        <button class="btn btn-success" @click="send">数据发送给C</button>
    </div>
</template>
<template id="com-b-2">
    <div>
        <h3>组件B:{{name}}</h3>
        <button class="btn btn-success" @click="send">数据发送给C</button>
    </div>
</template>
<template id="com-b-3">
    <div>
        <h3>组件C接收的数据Name：{{nameA}}{{nameB}}</h3>
    </div>
</template>

<!--子组件和父组件通信-->
<div id="com-c">
    <com-c-1></com-c-1>
</div>
<template id="com-c-1">
    <div>
        <h3>我是父组件，访问我的数据，姓名：{{pname}}</h3>
        <h3>我是父组件，访问子的数据，姓名：{{cname}} ,年龄：{{cage}}</h3>
<!--        子组件直接植入父组件中:可以使用绑定关键字或者简写进行绑定操作-->
        <com-c-2 v-bind:page="page" :pname="pname" v-on:e-com-c-2="handleSubData"></com-c-2>
    </div>
</template>
<template id="com-c-2">
    <div>
        <h3>我是子组件，访问父组件的Name：{{pname}}，Age{{page}}</h3>
        <h3>我是子组件，访问我的数据，姓名：{{cname}},Age:{{cage}}</h3>
        <button @click="sendMsg">SendMsg</button>
    </div>
</template>

<div id="root-p">
    <com-k :name="name"></com-k>
<!----组件通信：父-》子-->
<!--    子节点获取父节点的数据，子节点需要定义接收-->
    <p-com :msg="msg"></p-com>
</div>
<template id="p-com">
    <div>
        <p>{{title}}--{{msg}}</p>
        <ul>
            <li v-for="(v, i) in lists">{{v}}</li>
        </ul>
    </div>
</template>

<!--v-component-->
<div id="root-component">
    <hello-world></hello-world>
    <hello></hello>
    <component-cn></component-cn>
    <com-con></com-con>
    <component-tab></component-tab>
</div>
<!--定义模板-->
<template id="com-con">
    <div>
        <p>{{title}}</p>
        <ul>
            <li v-for="(v, i) in lists">{{v}}</li>
        </ul>
    </div>
</template>
<template id="com-tab">
    <div>
        <ul class="tab-tit">
            <li v-for="(v, i) in tabTitle" @click="cur1=i" :class="{active:cur1==i}">{{v}}</li>
        </ul>
        <div class="tab-content">
            <div v-for="(v, i) in tabContent" v-show="cur1===i">{{v}}</div>
        </div>
    </div>
</template>

<!--v-event-->
<div id="root-event">
    <!--阻止事件传播-阻止事件冒泡-->
    <div @click="showA()" class="a">A
        <div @click="showB()" class="b">B
            <div @click="showC()" class="c">C</div>
            <div @click.stop="showC()" class="c">C Stop</div>
        </div>
    </div>
<!--    阻止默认行为-->
    <a href="http://www.baidu.com" @click="showA()">clickA</a>
    <a href="http://www.baidu.com" @click.prevent="showA()">clickB</a>
<!--    只执行一次-->
    <button @click.once="showB()">Once</button>
</div>

<!--tab-->
<div id="root-tab">
    <ul class="tab-tit">
        <li @click="cur=0" :class="{active:cur==0}">标题1</li>
        <li @click="cur=0" :class="{active:cur==1}">标题2</li>
        <li @click="cur=0" :class="{active:cur==2}">标题3</li>
    </ul>
    <div class="tab-content">
        <div v-show="cur==0">内容一</div>
        <div v-show="cur==1">内容二</div>
        <div v-show="cur==2">内容三</div>
    </div>
<!--    动态实现-->
    <ul class="tab-tit">
        <li v-for="(v, i) in tabTitle" @click="cur1=i" :class="{active:cur1==i}">{{v}}</li>
    </ul>
    <div class="tab-content">
        <div v-for="(v, i) in tabContent" v-show="cur1===i">{{v}}</div>
    </div>
</div>

<!--v-model-->
<div id="root-model">
    <p>{{age}}</p>
<!--    表单的Model赋值和禁用-->
    <input type="text" v-model="age" :disabled="true">
<!--    通过表达式禁用-->
    <input type="text" v-model="age" :disabled="age==20">

    <div>
<!--        单个复选框-->
        <input type="checkbox" v-model="che">123{{che}}
<!--        多个复选框-->
        <input type="checkbox" v-model="arr" value="1">教师
        <input type="checkbox" v-model="arr" value="2">学生
        <input type="checkbox" v-model="arr" value="3">管理员
        {{arr}}
    </div>

<!--    单选框-->
    <div>
        <input type="radio" v-model="radioV" name="test" value="0">男
        <input type="radio" v-model="radioV" name="test" value="1">女
        {{radioV}}
    </div>

<!--    下拉框-->
    <div>
        <select v-model="selected">
<!--            value注意使用v-bind:来绑定-->
            <option v-for="(v, i) in items" v-bind:value="v.value">{{v.text}}</option>
        </select>
        {{selected}}
    </div>
</div>

<!--闪烁效果实现-->
<div id="root-light">
    <div v-cloak>
        {{msg}}--{{age}}
    </div>
<!--    值渲染,以文本形式解析-->
    <div v-text="msg"></div>
<!--    值渲染,以HTML形式解析-->
    <div v-html="html"></div>
</div>

<!--v-bind:样式绑定-->
<div id="root-bind">
    <img v-bind:src="url" width="100" height="100" :title="title">
    <img v-bind:src="flag?url:url1" width="50" height="50" :title="title">

<!--    单个引用-->
    <div :class="a1">Hello World</div>
<!--    多个引用 后面的会被前面的覆盖-->
    <div :class="[a1, a2]">Hello Fcant</div>
<!--    通过boolean值判断样式显示-->
    <div :class="{'a3':flag1}">Toll</div>

    <div :style="{color: 'red', background: '#f60', width: '70px'}">孔孟</div>
    <div :style="a4">圣贤书</div>
    <div :style="[a4, a5]">左格</div>
<!--    三目运算-->
    <div :class="flag? a1: a2">从未离去</div>
    <div :style="flag? a4: a5">你归不归</div>
</div>

<!--v-for：循环遍历-->
<div id="for">
    <div>{{msg}}--{{age}}</div>
    <ul>
        <li v-for="(v, i) in arr">
            {{v}}--{{i}}
        </li>
    </ul>
    <ul>
        <li v-for="(v, key) in obj">
            {{v}}--{{key}}
        </li>
    </ul>
    <ul>
        <li v-for="(v, key) in lists">
            {{v}}--{{key}}--{{v.name}}
        </li>
    </ul>
    <button v-on:click="click">点击</button>
    <button v-on:mouseover="mouseover">mouseOver</button>
    <button v-on:mouseout="mouseout">mouseOut</button>
    <button @dblclick="twoClick">twoClick</button>
<!--    隐藏显示内容-->
    <button v-show="flag">是否显示</button>
    <button v-show="age==17">是否显示年龄</button>
<!--    使用if else-->
    <p v-if="age==18">18</p>
    <p v-else-if="age==20">20</p>
    <p v-else>not</p>
<!--    三目表达式-->
    <p v-if="flag?age=18:age=20">{{age}}</p>
</div>

<div id="root">
    {{name}}
</div>

<div id="app-2">
  <span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>
    <div class="panel panel-info" style="margin: 20px">
<!--        头部-->
        <div class="panel-heading">
            <h1 style="display: inline-block;">{{name}}购物车清单</h1>
            <span class="label label-warning">清单总数:{{lists.length}}</span>
            <span class="label label-warning">未采购数:{{count}}</span>
        </div>
    </div>
<!--    内容-->
    <div class="panel-body">
        <div class="input-group">
            <input class="form-control" type="text" v-model="text"/>
            <span class="input-group-btn">
                <button class="btn btn-primary" v-on:click="add(text)">添加</button>
            </span>
        </div>
        <div>
            <table class="table">
                <thead>
                <tr>
                    <th>清单名称</th>
                    <th>已采购</th>
                    <th>状态</th>
                    <th>删除</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(item, index) in lists">
                    <td>{{item.name}}</td>
                    <td><input type="checkbox" v-model="item.state" @change="countSum"></td>
                    <td>{{item.state | stateFilter}}</td>
                    <td><button type="button" v-on:click="del(index)">删除</button></td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>

</div>
</body>
</html>